import React from "react";
import { TabBar } from "antd-mobile";
import { useNavigate, Outlet } from "react-router-dom";

import "./index.less"
const tabItems = [
  {
    key: "/",
    title: "首页",
    icon: "icon-ind",
  },
  {
    key: "Goods",
    title: "商城",
    icon: "icon-shangcheng",
  },
  {
    key: "Life",
    title: "生活服务",
    icon: "icon-shenghuofuwu",
  },
  {
    key: "My",
    title: "我的",
    icon: "icon-liangren",
  },
];
function TabBers() {
  const navgiate = useNavigate();
  const list = (value)=>{
    navgiate(value)
    // console.log(value);
  }
  return (
    <div className="home">
      <Outlet />
      <TabBar
        onChange={(key)=>{list(key)}}
      >
        {tabItems.map((item) => (
          <TabBar.Item
            title={item.title}
            key={item.key}
            icon={<i className={`iconfont ${item.icon}`} />}
            selectedIcon={<i className={`iconfont ${item.icon}`} />}
          
          />
        ))}
      </TabBar>
    </div>
  );
}

export default TabBers;
